<template>
    <div class="table-content">
        <table cellspacing="0" cellpadding="0" class="table-body">
            <tr v-for="(item,index) in columns">
                <template v-if="showType(item,index)===1">
                    <td class="table-body-title">
                        <div class="table-body-cell">
                            {{ renderName(item, index) }}
                        </div>
                    </td>
                    <td class="table-body-value">
                        <div class="table-body-cell">
                            {{ renderCell(item, index) }}
                        </div>
                    </td>
                    <td class="table-body-title">
                        <div class="table-body-cell">
                            {{ renderName(item, index + 1) }}
                        </div>
                    </td>
                    <td class="table-body-value">
                        <div class="table-body-cell">
                            {{ renderCell(item, index + 1) }}
                        </div>
                    </td>
                </template>
                <template v-if="showType(item,index)===2">
                    <td class="table-body-title">
                        <div class="table-body-cell">
                            {{ renderName(item, index) }}
                        </div>
                    </td>
                    <td class="table-body-value">
                        <div class="table-body-cell">
                            {{ renderCell(item, index) }}
                        </div>
                    </td>
                </template>
                <template v-if="showType(item,index)===3">
                    <td class="table-body-title">
                        <div class="table-body-cell">
                            {{ renderName(item, index) }}
                        </div>
                    </td>
                    <td class="table-body-value" colspan="3">
                        <div class="table-body-cell">
                            {{ renderCell(item, index) }}
                        </div>
                    </td>
                </template>
            </tr>
        </table>
    </div>
</template>

<script setup>
let props = defineProps({
    data: {
        type: Array,
    },
    columns: {
        type: Array,
    }
});

const showType = (item, index) => {
    let columns = props.columns
    if (index % 2 === 0 && !item.full && columns[index + 1]) {
        if (columns[index + 1] && columns[index + 1].full) {
            return 2
        }
        return 1
    } else if (index % 2 === 0 && !item.full && !columns[index + 1]) {
        return 2
    } else if (item.full) {
        return 3
    } else if (index % 2 !== 0 && columns[index - 1].full) {
        return 1
    }
    return 0
}


const renderName = (item, index) => {
    let columns = props.columns
    return columns[index]['title']
}
const renderCell = (item, index) => {
    let columns = props.columns
    let data = props.data
    return (columns[index]['render']
        ? columns[index].render(data[columns[index].field])
        : data[columns[index].field])
}


</script>

<style scoped lang="scss">
.table-content {
  margin: 10px 0;
}

.table-body {
  background-color: #ffffff;
  height: 25px;
  line-height: 150%;
  width: 100%;

  &-title {
    width: 20%;
  }

  &-value {
    width: 30%;
  }

  &-cell {
    padding: 10px;
  }
}

table,
td,
th {
  border: 1px solid #000;
  border-collapse: collapse;
}
</style>
